<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>Vue示例</title>
</head>

<body>
<div id="app">
    <div v-test.msg.a.b="message">
    </div>
    <script charset="utf-8" src="../js/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        Vue.directive('test', {
            bind: function (el, binding, vnode) {
                var keys = [];
                for (var i in vnode) {
                    keys.push(i);
                }
                el.innerHTML =
                    'name: ' + binding.name + '<br>' +
                    'value: ' + binding.value + '<br>' +
                    'expression: ' + binding.expression + '<br>' +
                    'argument: ' + binding.arg + '<br>' +
                    'modifiers: ' + JSON.stringify(binding.modifiers) + '<br>' +
                    'vnode keys: ' + keys.join(', ')
            }
        });

        var app = new Vue({
            el: '#app',
            data: {
                message: 'some text'
            }
        })
    </script>
</body>

</html>